<template>
  <div :id="id" :style="`height:${hgehs}px; width:${wdehs}px`"></div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted, nextTick, watch } from "vue";
import { storeToRefs } from "pinia";
import { useUser } from "@/store/modules/userInfo";
const userStore = useUser();
const { colorActive } = storeToRefs(userStore);
const wdehs = ref(0);
const hgehs = ref(0);
const props: any = defineProps({
  id: {
    type: String,
  },
  type: {
    type: String,
    default: "line",
  },
});
let option = ref({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  xAxis: [
    {
      type: "category",
      data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      axisTick: {
        alignWithLabel: true,
      },
    },
  ],
  yAxis: [
    {
      type: "value",
    },
  ],
  series: [
    {
      name: "Direct",
      type: props.type,
      barWidth: "60%",
      data: [10, 52, 200, 334, 390, 330, 220],
      color: colorActive.value,
    },
  ],
});
const inIt = () => {
  nextTick().then(() => {
    const wd = document.getElementsByClassName("eachers-container-6")[0]
      .clientWidth;
    const hg = document.getElementsByClassName("eachers-container-6")[0]
      .clientHeight;
    wdehs.value = wd;
    hgehs.value = hg;
    setTimeout(() => {
      const chartDom = document.getElementById(props.id);
      const myChart = echarts.init(chartDom);
      myChart.setOption(option.value);
    }, 50);
  });
};
watch(colorActive, (newValue :any) => {
  option.value.series[0].color = newValue;
  // 在这里处理 colorActive 参数的变化
  inIt();
});
onMounted(() => {
  inIt();
});
</script>

<style scoped lang="scss"></style>
